<template>
  <div class="exitExclel">
    <div class="header">
      <div class="btnBox">
        <el-button plain @click="emit('close', state.refresh, props.typeId)">{{ $t("merak.cancel") }}</el-button>
        <el-button type="primary" plain @click="submitForm(ruleFormRef, true)">{{ $t("merak.save_continue") }}</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef, false)">{{ $t("merak.save") }}</el-button>
    
      </div>
    </div>
    <!-- <div style="display: flex; flex-direction: column;height: 100%;"> -->
    <div style="height: 650px; display: flex; flex-direction: column">
      <basicTableSum ref="editTableRef" v-bind="tableConfig" @changeSelection="changeCheck" @editFormFun="editFormClick">
        <template #handle="{ row }">
          <el-button type="danger" link @click="delFun(row)">删除</el-button>
        </template>
      </basicTableSum>
    </div>
    <!-- </div> -->
  </div>
</template>
<script setup lang="ts" name="MerakeEditTable">
import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";
import qfInput from "@/components/MerakEditTable/components/a-qfInput/index.vue";

import { ref, reactive, defineProps, onMounted, computed } from "vue";

const editTableRef = ref(null);
const value2 = ref("");

const saveFun = () => {
  console.log(editTableRef.value.submitData(tableData));
};

const changeCheck = params => {
  console.log(params);
};

const editFormClick = params => {
  console.log(params);
};

// const paramsObj = reactive([date, name, address]);
const tableHeadData = reactive([]);
const tableData = reactive([]);
const headConfig = reactive({}); //头部配置是否可编辑
console.log(tableData);
// 行列选中样式  当前选中样式
// 行尾部和删除
const tableConfig = reactive({
  headData: tableHeadData, //表格头部数据
  tableData: tableData, //表格内容数据
  headConfig: headConfig, //可编辑列类型
  selection: false, //是否显示checkbox
  editStatus: false, //开启虚拟加载,关闭新增保存
  selection: true
});

// headConfig:{
//     column1:{
//     type:'select',
//     options:[]
//       }, //select\input\date
//     }
// {
//     title: 'title',
//     field: 'key',
//     fixed: 'left',
//     width: '200px'
// }

let number1 = 100;
let number = 500;
const initData = () => {
  console.time("for");
  let headArr = [];
  let headCon = {};
  for (let c = 0; c < number1; c++) {
    let key = "tableCol" + c,
      title = "column" + c;
    let objParams = {};

    switch (c) {
      case 0:
        //    objParams.type='select';
        objParams.fixed = "left";

        break;
      case 1:
        //    objParams.type='select';
        // objParams.fixed = "left";
        // headCon[key]={
        //     type:"select",
        //     multiple:true,
        //     options:options
        // };
        headCon[key] = "input";
        break;
      case 2:
      case 3:
        // objParams.type='date';
        headCon[key] = "date";
        break;
      case 4:
      case 5:
      case 6:
        headCon[key] = {
          type: "select",
          options: options
        };
        break;
      default:
        // objParams.type='input';
        headCon[key] = "input";
        break;
    }
    headArr.push({
      ...objParams,
      ...{
        title: title,
        field: key
      }
    });
    // if (c == 0) {

    // } else if (c == 1) {
    //     headArr.push(
    //         {
    //             title: title,
    //             field: key,
    //             fixed: 'left',
    //         }
    //     )
    // } else {
    //     headArr.push(
    //         {
    //             title: title,
    //             field: key
    //         }
    //     )
    // }
  }
  console.log(headCon);
  Object.assign(headConfig, headCon);
  Object.assign(tableHeadData, headArr);
  let TableNew = [];
  for (let i = 0; i < number; i++) {
    let objKey = {};
    for (let c = 0; c < number1; c++) {
      let key = "tableCol" + c,
        value = "Row " + i + "-" + "col " + c;
      if (c == 1) {
        value = "RowRowRow " + i + "-" + "colcolcol " + c;
      }
      let errTip = "";
      if (c == 1 && i == 3) {
        errTip = "错误信息。。。";
      }

      objKey[key] = {
        label: value,
        value: "1",
        errTip: errTip
      };
    }
    TableNew.push(objKey);
    // TableNew.push({
    //     index: i,
    //     date: '2016-05-03',
    //     name: 'Tom',
    //     address: 'No. 189, Grove St, Los Angeles',
    //    selection:true
    // })
  }

  Object.assign(tableData, TableNew);
  console.timeEnd("for");
};

const options = [
  {
    value: "1",
    label: "Option1"
  },
  {
    value: "2",
    label: "Option2"
  },
  {
    value: "3",
    label: "Option3"
  },
  {
    value: "4",
    label: "Option4"
  },
  {
    value: "5",
    label: "Option5"
  },
  {
    value: "1",
    label: "Option1"
  },
  {
    value: "2",
    label: "Option2"
  },
  {
    value: "3",
    label: "Option3"
  },
  {
    value: "4",
    label: "Option4"
  },
  {
    value: "5",
    label: "Option5"
  },
  {
    value: "1",
    label: "Option1"
  },
  {
    value: "2",
    label: "Option2"
  },
  {
    value: "3",
    label: "Option3"
  },
  {
    value: "4",
    label: "Option4"
  },
  {
    value: "5",
    label: "Option5"
  },
  {
    value: "1",
    label: "Option1"
  },
  {
    value: "2",
    label: "Option2"
  },
  {
    value: "3",
    label: "Option3"
  },
  {
    value: "4",
    label: "Option4"
  },
  {
    value: "5",
    label: "Option5"
  },
  {
    value: "1",
    label: "Option1"
  },
  {
    value: "2",
    label: "Option2"
  },
  {
    value: "3",
    label: "Option3"
  },
  {
    value: "4",
    label: "Option4"
  },
  {
    value: "5",
    label: "Option5"
  },

  {
    value: "1",
    label: "Option1"
  },
  {
    value: "2",
    label: "Option2"
  },
  {
    value: "3",
    label: "Option3"
  },
  {
    value: "4",
    label: "Option4"
  },
  {
    value: "5",
    label: "Option5"
  }
];

onMounted(() => {
  initData();
});
</script>
<style lang="scss" scoped>
@import url(./index.scss);
</style>
